<template>
  <div>
    <h1>地图管理</h1>

    <el-button @click="fn1">添加一个标注点</el-button>
    <el-button @click="fn2">添加一个线段</el-button>
    <hr />
    <div ref="boxRef" class="box"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    //定义地图中心点坐标
    var center = new TMap.LatLng(22.626203, 113.83801);

    //定义map变量，调用 TMap.Map() 构造函数创建地图
    var map = new TMap.Map(this.$refs.boxRef, {
      center: center, //设置地图中心点坐标
      zoom: 16,
    });

    //创建并初始化MultiMarker
    this.markerLayer = new TMap.MultiMarker({
      map: map, //指定地图容器
      //样式定义
      styles: {
        //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
        myStyle: new TMap.MarkerStyle({
          width: 25, // 点标记样式宽度（像素）
          height: 35, // 点标记样式高度（像素）
          // src: "../../../assets/vue.svg", //图片路径
          //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
          anchor: { x: 16, y: 32 },
        }),
      },
      //点标记数据数组
      geometries: [
        // {
        //   id: "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        //   // styleId: "myStyle", //指定样式id
        //   position: new TMap.LatLng(39.954104, 116.357503), //点标记坐标位置
        //   properties: {
        //     //自定义属性
        //     title: "marker1",
        //   },
        // },
        // {
        //   //第二个点标记
        //   id: "2",
        //   // styleId: "marker",
        //   position: new TMap.LatLng(39.994104, 116.287503),
        //   properties: {
        //     title: "marker2",
        //   },
        // },
      ],
    });

    // 初始化几何图形及编辑器
    const editor = new TMap.tools.GeometryEditor({
      map, // 编辑器绑定的地图对象
      overlayList: [
        {
          overlay: this.markerLayer, // 可编辑图层
          id: "marker",
          selectedStyleId: "highlight", // 被选中的marker会变为高亮样式
        },
      ],
      actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
      activeOverlayId: "marker", // 激活图层
      selectable: true,
    });

    this.polylineLayer = new TMap.MultiPolyline({
      id: "polyline-layer", //图层唯一标识
      map: map, //设置折线图层显示到哪个地图实例中
      //折线样式定义
      styles: {
        style_blue: new TMap.PolylineStyle({
          color: "#3777FF", //线填充色
          width: 6, //折线宽度
          borderWidth: 5, //边线宽度
          borderColor: "#FFF", //边线颜色
          lineCap: "butt", //线端头方式
        }),
        style_red: new TMap.PolylineStyle({
          color: "#CC0000", //线填充色
          width: 6, //折线宽度
          borderWidth: 5, //边线宽度
          borderColor: "#CCC", //边线颜色
          lineCap: "round", //线端头方式
        }),
      },
      //折线数据定义
      geometries: [
        // {
        //   //第1条线
        //   id: "pl_1", //折线唯一标识，删除时使用
        //   styleId: "style_blue", //绑定样式名
        //   paths: [
        //     new TMap.LatLng(40.03854, 116.272389),
        //     new TMap.LatLng(40.038844, 116.27521),
        //     new TMap.LatLng(40.041407, 116.274738),
        //   ],
        // },
        // {
        //   //第2条线
        //   id: "pl_2",
        //   styleId: "style_red",
        //   paths: [
        //     new TMap.LatLng(40.039492, 116.271893),
        //     new TMap.LatLng(40.041562, 116.271421),
        //     new TMap.LatLng(40.041957, 116.274211),
        //   ],
        // },
      ],
    });
  },

  methods: {
    fn1() {
      this.markerLayer.add([
        {
          id: "3", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
          position: new TMap.LatLng(22.62724, 113.836849), //点标记坐标位置
          properties: {
            //自定义属性
            title: "marker3",
          },
        },
        {
          //第4个点标记
          id: "4",
          position: new TMap.LatLng(22.625922, 113.840313),
          properties: {
            title: "marker4",
          },
        },
      ]);
    },

    fn2() {
      this.polylineLayer.add({
        //新的折线添加到图层中
        id: "pl_1",
        styleId: "style_blue",
        paths: [
          new TMap.LatLng(22.62724, 113.836849),
          new TMap.LatLng(22.625922, 113.840313),
        ],
      });
    },
  },
};
</script>

<style>
.box {
  width: 100%;
  height: 500px;
}
</style>
